import { forwardRef } from "react";
import classNames from "classnames";

import styles from "./index.module.scss";

import Logo from "@/public/logo.png";
import { useCommonStore } from "@/src/providers/common-store-provider";
import Confirm from "@/app/components/Confirm";
import { isAndroid, multiplyFontSize } from "@/app/utils";

interface IndexProps {
  active: string;
  onChange: (d: string) => void;
  style?: React.CSSProperties;
  onTouchStart?: any;
}
const Index = forwardRef<any, IndexProps>(
  ({ active, onChange, style }, ref) => {
    const {
      htmlString,
      currentTab,
      setDownloading,
      downloading,
      isMobile,
      fontScale,
    } = useCommonStore((state) => state);
    // const { personalDetails } = usePersonalDetailsStore();
    // const { content } = useContentStore();
    // const { customization } = useCustomizationStore();

    // const [state, setState] = useSetState({
    //   open: false,
    //   step: "1",
    //   okText: "下一步",
    //   resumes: [],
    //   loading: false,
    // });

    // const [form] = Form.useForm();

    return isMobile ? (
      <>
        <div
          ref={ref}
          id="siderbar"
          className={classNames(styles.siderbar, {
            [styles.btmauto]: currentTab === "content",
          })}
          style={style}
        >
          {!isMobile ? (
            <a
              href="/"
              className={styles.logo}
              style={{
                width: "40px",
                height: "60px",
                textAlign: "center",
                margin: "20px auto 0",
                cursor: "pointer",
                display: "block",
              }}
            >
              <img src={Logo.src} alt="" width={"100%"} />
            </a>
          ) : null}

          <div
            className={classNames([
              styles.menuItem,
              active === "content" ? styles.selected : "",
            ])}
            onClick={() => {
              onChange("content");
            }}
          >
            {active === "content" ? (
              <svg
                style={{ width: "35px" }}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 32 32"
              >
                <g clipPath="url(#clip0_487_148060.6669932567339942)">
                  <path
                    fill="url(#paint0_linear_487_148060.6669932567339942)"
                    fillRule="evenodd"
                    d="M26.92 10.246l-6.752-7.034A.688.688 0 0019.67 3H10.8A5.782 5.782 0 005 8.66v14.285a5.79 5.79 0 005.8 5.903h10.652a5.87 5.87 0 005.66-5.903V10.723a.69.69 0 00-.191-.477zm-2.14-.135c-.673.104-1.353.166-2.035.185a2.747 2.747 0 01-2.736-2.744V5.06l4.772 5.052zm-3.328 17.36H10.8a4.413 4.413 0 01-4.423-4.526V8.66A4.405 4.405 0 0110.8 4.378h7.849c-.001.01-.005.02-.008.029-.004.01-.008.022-.008.033v3.112a4.127 4.127 0 004.11 4.122h.02c.76-.017 1.519-.086 2.27-.207.235-.033.485-.065.702-.088v11.566a4.495 4.495 0 01-4.283 4.526zm-2.384-7.41h-7.196a.689.689 0 000 1.378h7.197a.689.689 0 100-1.378zm-2.722-5.225H11.87a.69.69 0 110-1.378h4.475a.69.69 0 110 1.378z"
                    clipRule="evenodd"
                  ></path>
                </g>
                <defs>
                  <linearGradient
                    id="paint0_linear_487_148060.6669932567339942"
                    x1="4.998"
                    x2="27.113"
                    y1="15.924"
                    y2="15.924"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="#EC008C"></stop>
                    <stop offset="1" stopColor="#FC6767"></stop>
                  </linearGradient>
                  <clipPath id="clip0_487_148060.6669932567339942">
                    <path
                      fill="#fff"
                      d="M0 0H22.114V25.848H0z"
                      transform="translate(5 3)"
                    ></path>
                  </clipPath>
                </defs>
              </svg>
            ) : (
              <svg
                style={{ width: "35px" }}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 32 32"
              >
                <g clipPath="url(#clip0_487_148060.6669932567339942)">
                  <path
                    fill="#200E32"
                    fillRule="evenodd"
                    d="M26.92 10.246l-6.752-7.034A.688.688 0 0019.67 3H10.8A5.782 5.782 0 005 8.66v14.285a5.79 5.79 0 005.8 5.903h10.652a5.87 5.87 0 005.66-5.903V10.723a.69.69 0 00-.191-.477zm-2.14-.135c-.673.104-1.353.166-2.035.185a2.747 2.747 0 01-2.736-2.744V5.06l4.772 5.052zm-3.328 17.36H10.8a4.413 4.413 0 01-4.423-4.526V8.66A4.405 4.405 0 0110.8 4.378h7.849c-.001.01-.005.02-.008.029-.004.01-.008.022-.008.033v3.112a4.127 4.127 0 004.11 4.122h.02c.76-.017 1.519-.086 2.27-.207.235-.033.485-.065.702-.088v11.566a4.495 4.495 0 01-4.283 4.526zm-2.384-7.41h-7.196a.689.689 0 000 1.378h7.197a.689.689 0 100-1.378zm-2.722-5.225H11.87a.69.69 0 110-1.378h4.475a.69.69 0 110 1.378z"
                    clipRule="evenodd"
                  ></path>
                </g>
                <defs>
                  <linearGradient
                    id="paint0_linear_487_148060.6669932567339942"
                    x1="4.998"
                    x2="27.113"
                    y1="15.924"
                    y2="15.924"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="#EC008C"></stop>
                    <stop offset="1" stopColor="#FC6767"></stop>
                  </linearGradient>
                  <clipPath id="clip0_487_148060.6669932567339942">
                    <path
                      fill="#fff"
                      d="M0 0H22.114V25.848H0z"
                      transform="translate(5 3)"
                    ></path>
                  </clipPath>
                </defs>
              </svg>
            )}
            <div
              className={classNames([
                styles.txt,
                active === "content" ? styles.selected : "",
              ])}
            >
              简历内容
            </div>
          </div>
          <div
            className={classNames([
              styles.menuItem,
              active === "customize" ? styles.selected : "",
            ])}
            onClick={() => {
              onChange("customize");
            }}
          >
            {active === "customize" ? (
              <svg
                style={{ width: "35px" }}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 32 32"
              >
                <path
                  fill="url(#paint0_linear_487_140460.6061370647811584)"
                  fillRule="evenodd"
                  d="M5.756 5.378h6.488c.761 0 1.378.617 1.378 1.378v19.488c0 .761-.617 1.378-1.378 1.378H5.756c-.761 0-1.378-.617-1.378-1.378v-1.896H8.04a.689.689 0 100-1.378H4.378v-3.144H8.04a.689.689 0 100-1.378H4.378v-3.143H8.04a.689.689 0 100-1.378H4.378v-3.144H8.04a.689.689 0 000-1.378H4.378v-2.65c0-.76.617-1.377 1.378-1.377zM3 6.756A2.756 2.756 0 015.756 4h6.488A2.756 2.756 0 0115 6.756v19.488A2.756 2.756 0 0112.244 29H5.756A2.756 2.756 0 013 26.244V6.756zM24.082 5.4h-2.949A2.733 2.733 0 0018.4 8.133v2.38h8.415v-2.38A2.733 2.733 0 0024.082 5.4zM18.4 23.099V11.913h8.415V23.1c0 .318-.112.626-.316.87l-3.891 4.65-3.892-4.65a1.355 1.355 0 01-.316-.87zM21.133 4A4.133 4.133 0 0017 8.133V23.1c0 .647.227 1.273.642 1.769l3.91 4.67c.55.658 1.561.658 2.112 0l3.909-4.67a2.755 2.755 0 00.642-1.769V8.133A4.133 4.133 0 0024.082 4h-2.949z"
                  clipRule="evenodd"
                ></path>
                <defs>
                  <linearGradient
                    id="paint0_linear_487_140460.6061370647811584"
                    x1="3"
                    x2="28.215"
                    y1="17.016"
                    y2="17.016"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="#EC008C"></stop>
                    <stop offset="1" stopColor="#FC6767"></stop>
                  </linearGradient>
                </defs>
              </svg>
            ) : (
              <svg
                style={{ width: "35px" }}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 32 32"
              >
                <path
                  fill="#200E32"
                  fillRule="evenodd"
                  d="M5.756 5.378h6.488c.761 0 1.378.617 1.378 1.378v19.488c0 .761-.617 1.378-1.378 1.378H5.756c-.761 0-1.378-.617-1.378-1.378v-1.896H8.04a.689.689 0 100-1.378H4.378v-3.144H8.04a.689.689 0 100-1.378H4.378v-3.143H8.04a.689.689 0 100-1.378H4.378v-3.144H8.04a.689.689 0 000-1.378H4.378v-2.65c0-.76.617-1.377 1.378-1.377zM3 6.756A2.756 2.756 0 015.756 4h6.488A2.756 2.756 0 0115 6.756v19.488A2.756 2.756 0 0112.244 29H5.756A2.756 2.756 0 013 26.244V6.756zM24.082 5.4h-2.949A2.733 2.733 0 0018.4 8.133v2.38h8.415v-2.38A2.733 2.733 0 0024.082 5.4zM18.4 23.099V11.913h8.415V23.1c0 .318-.112.626-.316.87l-3.891 4.65-3.892-4.65a1.355 1.355 0 01-.316-.87zM21.133 4A4.133 4.133 0 0017 8.133V23.1c0 .647.227 1.273.642 1.769l3.91 4.67c.55.658 1.561.658 2.112 0l3.909-4.67a2.755 2.755 0 00.642-1.769V8.133A4.133 4.133 0 0024.082 4h-2.949z"
                  clipRule="evenodd"
                ></path>
                <defs>
                  <linearGradient
                    id="paint0_linear_487_140460.6061370647811584"
                    x1="3"
                    x2="28.215"
                    y1="17.016"
                    y2="17.016"
                    gradientUnits="userSpaceOnUse"
                  >
                    <stop stopColor="#EC008C"></stop>
                    <stop offset="1" stopColor="#FC6767"></stop>
                  </linearGradient>
                </defs>
              </svg>
            )}
            <div
              className={classNames([
                styles.txt,
                active === "customize" ? styles.selected : "",
              ])}
            >
              个性化
            </div>
          </div>
          {
            <div
              className={classNames([styles.menuItem, styles.preview])}
              onClick={() => {
                onChange("preview");
              }}
            >
              <svg
                style={{ width: "35px" }}
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 40 38"
                className="w-10"
              >
                <path
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="1.8"
                  d="M33.049 18.226v-5.367l-8.225-8.177H14.025c-3.343 0-6.224 2.587-6.224 5.78v16.642c0 3.373 2.691 6.025 6.224 6.025.825 0 4.442-.06 6.25 0"
                ></path>
                <path
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="1.8"
                  d="M24.398 4.663v4.509c0 2.201 1.865 3.987 4.17 3.991 2.137.005 4.323.006 4.471-.003"
                ></path>
                <ellipse
                  cx="29.41"
                  cy="28.15"
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="1.8"
                  rx="6.386"
                  ry="5.805"
                ></ellipse>
                <path
                  stroke="currentColor"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="1.8"
                  d="M33.852 32.49l2.503 2.27"
                ></path>
              </svg>
              <div
                className={classNames([
                  styles.txt,
                  active === "customize" ? styles.selected : "",
                ])}
              >
                预览
              </div>
            </div>
          }
          <button
            disabled={downloading}
            className={classNames([styles.menuItem])}
            onClick={async () => {
              if (isMobile) {
                Confirm({
                  title: "提示",
                  content: (
                    <div>
                      目前不支持手机端下载，请至PC端进行免费下载
                      网址：www.jianli101.com
                    </div>
                  ),
                  onOk: async () => {},
                  okText: "确定",
                  cancelButtonProps: {
                    style: {
                      display: "none",
                    },
                  },
                });
                return;
              }
              let html = htmlString;

              if (isMobile && isAndroid()) {
                html = multiplyFontSize(html, 1 / fontScale);
              }
              // try {
              //   setDownloading(true);
              //   try {
              //     let res = await exportAndDownloadByBuffer(
              //       downloadFile({
              //         htmlString: getStyle() + html,
              //         fileName: `${personalDetails.name}_${
              //           personalDetails.expJob || ""
              //         }`,
              //         templateId: customization.templateId || null,
              //         resumeId: personalDetails.id || null,
              //       })
              //     );
              //     setDownloading(false);
              //     if (!res) return;
              //     if (isMobile) {
              //       Confirm({
              //         content: "简历下载完成，请至电脑中查看！",
              //         showCancelButton: false,
              //       });
              //     } else {
              //       Modal.confirm({
              //         content: "简历下载完成，请至电脑中查看！",
              //         okText: "确认",
              //         title: "提示",
              //         cancelButtonProps: {
              //           style: {
              //             display: "none",
              //           },
              //         },
              //         cancelText: "取消",
              //       });
              //     }
              //   } catch (e) {}

              //   setDownloading(false);
              // } catch (e) {}
            }}
          >
            <svg
              style={{ width: "35px" }}
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 19 18"
            >
              <path
                fillRule="evenodd"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1"
                d="M11.552 2.071H6.563c-1.544 0-2.875 1.252-2.875 2.797v8.053c0 1.632 1.243 2.915 2.875 2.915h5.991c1.545 0 2.797-1.37 2.797-2.915V6.028l-3.799-3.957z"
                clipRule="evenodd"
              ></path>
              <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1"
                d="M11.354 2.063v2.181a1.93 1.93 0 001.927 1.932c.987.002 1.997.003 2.066-.002M9.23 12.01V7.08M7.102 9.872l2.128 2.139 2.13-2.139"
              ></path>
            </svg>
            <div className={classNames([styles.txt])}>下载</div>
          </button>
        </div>
      </>
    ) : null;
  }
);
Index.displayName = "sidebar";
export default Index;
